/*
 * @description: 寝室视频上传列表
 * @Author: along
 * @Date: 2021-03-15
 * @Last Modified by: along
 * @Last Modified time: 2021-03-22
 */
<template>
    <div class="container">
        <div class="nav">
            <p class="title">寝室视频上传</p>
            <p class="desc" @click="handleStep()">寝室推广任务规则</p>
        </div>
        <header class="header">
            <div class="header_box">
                <p class="header_box_title">批次组名称:</p>
                <el-input
                    v-model="formData.product_name"
                    placeholder="请输入批次组名称"
                    size="medium"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                    :style="{width: '202px'}"
                />
            </div>
            <div class="header_box">
                <p class="header_box_title">寝室性别:</p>
                <el-select
                    v-model="formData.sex"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="medium"
                    @change="getTableData(1)"
                    :style="{width: '92px'}"
                >
                    <el-option
                        v-for="item in sexList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <p class="header_check" @click="getTableData(1)">查询</p>
            <p class="header_rest" @click="handleRestTable()">重置筛选条件</p>
        </header>

        <el-table
            :data="tableData"
            height="100%"
            style="width: calc(100% - 48px);margin:0 24px;"
            border
        >
            <el-table-column
                type="index"
                width="80"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="title"
                label="批次组名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :width="120"
            />
            <el-table-column
                prop="link_hire_count"
                label="批次数量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                prop="series_sex"
                label="寝室性别"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.series_sex == 1 ? '男' : scope.row.series_sex == 2 ? '女' : '不限' }}
                </template>
            </el-table-column>
            <el-table-column
                prop="appoint_time"
                label="委派时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.appoint_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="video_submit_time"
                label="提交时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.video_submit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="video_student_audit_time"
                label="审核时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :width="150"
            >
                <template slot-scope="scope">
                    {{ scope.row.video_student_audit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="video_student_audit_submit_count"
                label="有效数量/目标数量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :render-header="renderHeader"
                :width="160"
            >
                <template slot-scope="scope">
                    {{ scope.row.video_student_audit_submit_count }}/{{ scope.row.room_series_count }}
                </template>
            </el-table-column>
            <el-table-column
                prop="video_student_audit_fail_count"
                label="未通过数"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :render-header="renderHeader3"
                :width="120"
            />
            <el-table-column
                prop="video_student_audit_not_submit_count"
                label="可提审数"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :render-header="renderHeader4"
                :width="120"
            />
            <el-table-column
                prop="video_student_audit_submit_count"
                label="提交总数"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :render-header="renderHeader5"
                :width="120"
            />
            <el-table-column
                prop="video_score"
                label="总分数"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                :render-header="renderHeader6"
            />
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                :width="240"
            >
                <template slot-scope="scope">
                    <!-- 用户上传视频后且未提交审核，此处按钮即可点击提交 -->
                    <el-button
                        :disabled="scope.row.video_student_audit_not_submit_count === 0"
                        type="text"
                        class="curse-add"
                        @click="handleSubmit(scope.row)"
                    >
                        提交审核
                    </el-button>
                    <el-button
                        v-if="scope.row.status === 1"
                        type="text"
                        class="curse-add"
                        @click="handleUpload(scope.row)"
                    >
                        上传视频
                    </el-button>
                    <el-button
                        type="text"
                        class="curse-add"
                        @click="handleCheckBatch(scope.row)"
                    >
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>

        <!-- 使用教程弹窗 -->
        <use-process ref="useProcess" />
    </div>
</template>

<script>
import useProcess from '@/components/student-video-upload/use-process.vue';
export default {
    components: {
        useProcess
    },
    data () {
        return {
            formData: {
                product_name: '',//批次组名称
                sex: 99,//寝室性别 99:不限 1:男 2:女
            },
            sexList: [{value: 99, label: '不限'},{value: 1, label: '男'},{value: 2, label: '女'}],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [{}]
        };
    },
    mounted () {
        this.$store.commit('header/SET_HEADER', [{ title: "寝室视频上传"}]);
        this.checkUseProcess();
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/stuhire_room_series/Series/getList', {
                page_id: page || this.page.now_page,
                title: this.formData.product_name,
                series_sex: this.formData.sex
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 查询是否首次进入页面
         */
        checkUseProcess () {
            const firstCheckPage = localStorage.getItem('ZSDX_FIRST_PAGE');

            if(!firstCheckPage) {
                console.log('@@@首次进入页面');
                this.$refs.useProcess.show();
                localStorage.setItem('ZSDX_FIRST_PAGE', true);
            }
        },

        /**
         * @description 使用教程
         */
        handleStep () {
            this.$refs.useProcess.show();
        },

        /**
         * @description 重置筛选内容
         */
        handleRestTable () {
            this.formData = {
                product_name: '',//批次组名称
                sex: 99,//寝室性别
            };
            this.getTableData();
        },

        /**
         * @description 提交审核
         */
        handleSubmit (row) {
            this.$post('/stuhire_room_series/Series/submitAudit', {
                series_no: row.series_no
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '提交成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 上传视频
         */
        handleUpload (row) {
            this.$router.push({
                name: 'uploadInfo',
                query: {
                    series_no: row.series_no,
                    type: 'upload'
                }
            });
        },

        /**
         * @description 查看记录
         */
        handleCheckHistory (row) {
            this.$router.push({
                name: 'uploadInfo',
                query: {
                    series_no: row.series_no,
                    type: row.status === 2 ? 'check' : 'error'
                }
            });
        },

        /**
         * @description 查看批次
         */
        handleCheckBatch (row) {
            this.$router.push({
                name: 'uploadDetail',
                query: {
                    series_no: row.series_no
                }
            });
        },

        /**
         * 设置表头
         */
        renderHeader(h){
            return h('span', {}, [
                h('span', {}, '有效数量/目标数量  '),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '有效数量指的是运营审核通过的数量，目标数量指的是，运营创建批次的时候给用户定的目标数量。' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader2(h){
            return h('span', {}, [
                h('span', {}, '待审核数'),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '用户上传视频且提交了审核，总后台未进行审核的数量' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader3(h){
            return h('span', {}, [
                h('span', {}, '未通过数'),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '用户提交审核，未通过的数量（用户端未通过的数据，支持删除，但是不会影响到此处的数据）' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader4(h){
            return h('span', {}, [
                h('span', {}, '可提审数'),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '用户上传的视频，但是没有提交审核的数量统计' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader5(h){
            return h('span', {}, [
                h('span', {}, '提交总数'),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '用户上传视频且提交审核的数量之和' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },
        renderHeader6(h){
            return h('span', {}, [
                h('span', {}, '总分数'),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '用户上传视频，总会后台会给上传的视频进行打分，低于预期、符合预期、超预期、远超预期；对应的是1、2、3、5分数。此处的分数就是各个审核通过的视频分数之和' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #ffffff;
    .nav {
        height: 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 32px 0 24px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        .title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
        }
        .desc {
            color: rgba(24, 144, 255, 1);
            font-size: 14px;
            text-decoration: underline;
            cursor: pointer;
        }
    }
    .header {
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding: 0 24px;
        .header_box {
            display: flex;
            height: 36px;
            align-items: center;
            margin-top: 26px;
            margin-right: 16px;
            .header_box_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
                white-space: nowrap;
            }
        }
        .header_check {
            width: 65px;
            height: 36px;
            border: 1px rgba(24, 144, 255, 1) solid;
            text-align: center;
            line-height: 36px;
            cursor: pointer;
            border-radius: 4px;
            color: rgba(24, 144, 255, 1);
            font-size: 14px;
            margin-right: 16px;
            margin-top: 26px;
        }
        .header_rest {
            color: rgba(24, 144, 255, 1);
            font-size: 14px;
            cursor: pointer;
            margin-top: 26px;
            height: 36px;
            line-height: 36px;
        }
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 16px;
        padding-bottom: 16px;
        padding-right: 24px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>